<template>
  <div class="p-2">
    <el-row :gutter="20">
      <el-col :span="8" :xs="24">
        <el-card class="box-card" v-show="!dialog.visible">
          <div>
            <el-button v-if="infoData.companyName == ''" type="primary" @click="handleAdd"
              >新增</el-button>
            <el-button v-else type="primary" @click="handleUpdate(companyInfoList[0])"
              >修改</el-button>
          </div>
          <div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                公司注册地址
                <div class="pull-right">{{ infoData.companyRegisteredAddress }}</div>
              </li>
              <li class="list-group-item">
                公司名称
                <div class="pull-right">{{ infoData.companyName }}</div>
              </li>
              <li class="list-group-item">
                统一社会信用代码
                <div class="pull-right">{{ infoData.companyCode }}</div>
              </li>
              <li class="list-group-item" style="height: 240px; line-height: 240px;">
                营业执照（图）
                <div class="pull-right">
                  <image-preview style="display: block;" v-if="infoData.businessImage" :src="infoData.businessImage" :width="200" :height="200" />
                </div>
              </li>
              <li class="list-group-item">
                营业执照有效期
                <div class="pull-right">{{ infoData.businessDate }}</div>
              </li>
              <li class="list-group-item">
                营业执照所在地
                <div class="pull-right">{{ infoData.businessAddress }}</div>
              </li>
              <li class="list-group-item">
                营业执照详细地址
                <div class="pull-right">{{ infoData.businessAddressAll }}</div>
              </li>
              <li class="list-group-item">
                企业经营范围
                <div class="pull-right">{{ infoData.businessScope }}</div>
              </li>
              <li class="list-group-item">
                公司联系电话
                <div class="pull-right">{{ infoData.companyPhone }}</div>
              </li>
              <li class="list-group-item">
                经营模式
                <div class="pull-right">{{ infoData.businessModel }}</div>
              </li>
              <li class="list-group-item">
                合作模式
                <div class="pull-right">{{ infoData.cooperationModel }}</div>
              </li>
              <li class="list-group-item">
                经营类目
                <div class="pull-right">{{ infoData.businessCategory }}</div>
              </li>
              <li class="list-group-item">
                品牌信息
                <div class="pull-right">{{ infoData.brandInfo }}</div>
              </li>
            </ul>
          </div>
        </el-card>
        <el-card v-show="dialog.visible">
          <el-form ref="companyInfoFormRef" :model="form" :rules="rules" label-width="110px">
            <el-form-item label="注册地址" prop="companyRegisteredAddress">
              <el-input v-model="form.companyRegisteredAddress" placeholder="请输入注册地址" clearable/>
            </el-form-item>
            <el-form-item label="企业名称" prop="companyName">
              <el-input v-model="form.companyName" placeholder="请输入企业名称" clearable/>
            </el-form-item>
            <el-form-item label="统一社会信用代码" prop="companyCode">
              <el-input v-model="form.companyCode" placeholder="请输入信用代码" clearable/>
            </el-form-item>
            <el-form-item label="营业执照" prop="businessImage">
              <image-upload :limit="1" v-model="form.businessImage" />
            </el-form-item>
            <el-form-item label="执照有效期" prop="businessDate">
              <el-date-picker clearable v-model="form.businessDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择执照有效期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="执照所在地" prop="businessAddress">
              <el-input v-model="form.businessAddress" placeholder="请输入执照所在地" clearable/>
            </el-form-item>
            <el-form-item label="执照详细地址" prop="businessAddressAll">
              <el-input v-model="form.businessAddressAll" placeholder="请输入执照详细地址" clearable/>
            </el-form-item>
            <el-form-item label="经营范围" prop="businessScope">
              <el-input v-model="form.businessScope" placeholder="请输入经营范围" clearable/>
            </el-form-item>
            <el-form-item label="企业电话" prop="companyPhone">
              <el-input v-model="form.companyPhone" placeholder="请输入企业电话" clearable/>
            </el-form-item>
            <el-form-item label="经营模式" prop="businessModel">
              <el-input v-model="form.businessModel" placeholder="请输入经营模式" clearable/>
            </el-form-item>
            <el-form-item label="合作模式" prop="cooperationModel">
              <el-input v-model="form.cooperationModel" placeholder="请输入合作模式" clearable/>
            </el-form-item>
            <el-form-item label="经营类目" prop="businessCategory">
              <el-input v-model="form.businessCategory" placeholder="请输入经营类目" clearable/>
            </el-form-item>
            <el-form-item label="品牌信息" prop="brandInfo">
              <el-input v-model="form.brandInfo" placeholder="请输入品牌信息" clearable/>
            </el-form-item>
          </el-form>
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
      </el-col>
    </el-row>


  </div>
</template>

<script setup name="CompanyInfo" lang="ts">
import { listCompanyInfo, getCompanyInfo, delCompanyInfo, addCompanyInfo, updateCompanyInfo } from '@/api/system/companyInfo';
import { CompanyInfoVO, CompanyInfoQuery, CompanyInfoForm } from '@/api/system/companyInfo/types';
import { object } from 'vue-types';
import { validateSpaceAndEmoji } from '@/utils/validate'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const companyInfoList = ref<CompanyInfoVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const ids = ref<Array<string | number>>([]);

const total = ref(0);
const editEnabled = ref(false);


const handleEdit = () => {
  editEnabled.value = true
}

// 
const state = ref<Record<string, any>>({
  user: {},
  roleGroup: '',
  postGroup: '',
  auths: []
});

const infoData: CompanyInfoForm = reactive({
})

const queryFormRef = ref<ElFormInstance>();
const companyInfoFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: CompanyInfoForm = {
  id: undefined,
  companyRegisteredAddress: undefined,
  companyName: undefined,
  companyCode: undefined,
  businessImage: undefined,
  businessAddress: undefined,
  businessAddressAll: undefined,
  businessScope: undefined,
  companyPhone: undefined,
  businessModel: undefined,
  cooperationModel: undefined,
  businessCategory: undefined,
  remark: undefined,
  delFlag: undefined,
  tenantId: undefined,
  createDept: undefined,
  createBy: undefined,
  createTime: undefined,
  updateBy: undefined,
  updateTime: undefined,
  userId: undefined,
  brandInfo: [],
}
const data = reactive<PageData<CompanyInfoForm, CompanyInfoQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    companyRegisteredAddress: undefined,
    companyCode: undefined,
    businessImage: undefined,
    businessAddress: undefined,
    businessAddressAll: undefined,
    businessScope: undefined,
    companyPhone: undefined,
    businessModel: undefined,
    cooperationModel: undefined,
    businessCategory: undefined,
    remark: undefined,
    delFlag: undefined,
    tenantId: undefined,
    createDept: undefined,
    createBy: undefined,
    createTime: undefined,
    updateBy: undefined,
    updateTime: undefined,
    userId: undefined,
  },
  rules: {
    companyName: [{ required: true, message: "公司名称不能为空", trigger: "blur" },{ validator: validateSpaceAndEmoji, }],
    companyRegisteredAddress: [{ required: true, message: "公司注册地址不能为空", trigger: "blur" },{ validator: validateSpaceAndEmoji, }],
    companyCode: [{ required: true, message: "统一社会信用代码不能为空", trigger: "blur" },{ validator: validateSpaceAndEmoji, }],
    businessImage: [{ required: true, message: "营业执照（图）不能为空", trigger: "blur" }],
    businessDate: [{ required: true, message: "营业执照有效期不能为空", trigger: "blur" }],
    businessAddress: [{ required: true, message: "营业执照所在地不能为空", trigger: "blur" },{ validator: validateSpaceAndEmoji, }],
    businessAddressAll: [{ required: true, message: "营业执详细地址不能为空", trigger: "blur" },{ validator: validateSpaceAndEmoji, }],
    businessScope: [{ required: true, message: "企业经营范围不能为空", trigger: "blur" },{ validator: validateSpaceAndEmoji, }],
    companyPhone: [{
      required: true,
      message: "公司联系电话不能为空",
      trigger: "blur"
    }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
    businessModel: [{ required: true, message: "经营模式不能为空", trigger: "blur" },{ validator: validateSpaceAndEmoji, }],
    cooperationModel: [{ required: true, message: "合作模式不能为空", trigger: "blur" },{ validator: validateSpaceAndEmoji, }],
    businessCategory: [{ required: true, message: "经营类目不能为空", trigger: "blur" },{ validator: validateSpaceAndEmoji, }],
    email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"]
    }],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询企业账号信息列表 */
const getList = async () => {
  loading.value = true;
  const res = await listCompanyInfo(queryParams.value);
  Object.assign(infoData, res.rows[0])
  companyInfoList.value = res.rows
  total.value = res.total;
  loading.value = false;
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  companyInfoFormRef.value?.resetFields();
}



/** 新增按钮操作 */
const handleAdd = () => {
  dialog.visible = true;
  dialog.title = "添加企业账号信息";
  nextTick(() => {
    reset();
  });
}

/** 修改按钮操作 */
const handleUpdate = (row?: CompanyInfoVO) => {
  loading.value = true
  dialog.visible = true;
  dialog.title = "修改企业账号信息";
  nextTick(async () => {
    reset();
    const _id = row?.id || ids.value[0]
    const res = await getCompanyInfo(_id);
    loading.value = false;
    Object.assign(form.value, res.data);
  });
}

/** 提交按钮 */
const submitForm = () => {
  companyInfoFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateCompanyInfo(form.value).finally(() => buttonLoading.value = false);
      } else {
        await addCompanyInfo(form.value).finally(() => buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("修改成功");
      dialog.visible = false;
      await getList();
    }
  });
}


onBeforeMount(() => {
  getList();
});
</script>
